<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employees</title>
    <style type="text/css">
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>
<body>

<table>
    <thead>
    <tr>
        <td>ID</td>
        <td>LastName</td>
        <td>E-mail</td>
        <td>Gender</td>
        <td><a th:href="@{/toAdd}">add</a></td>
    </tr>
    </thead>
    <tbody th:each="employee:${employees}">
    <tr>
        <td th:text="${employee.id}"></td>
        <td th:text="${employee.lastName}"></td>
        <td th:text="${employee.email}"></td>
        <td th:text="${employee.gender}"></td>
        <td>
            <a id="delEmployee" @click="delEmployee" th:href="@{'/del/'+${employee.id}}">删除</a>
            <a th:href="@{'/toUpdate/'+${employee.id}}">修改</a>
        </td>
    </tr>
    </tbody>
</table>

<form id="del-form" method="post">
    <input type="hidden" name="_method" value="DELETE"/>
</form>

<script type="application/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="application/javascript">
    new Vue({
        el: "#delEmployee",
        methods: {
            //event 表示当前事件
            delEmployee:function(event) {
                //通过id获取表单标签
                var delForm = document.getElementById("del-form");
                //将超链接的地址赋值给表单的action属性
                delForm.action = event.target.href;
                //表单提交
                delForm.submit();
                //取消超链接的默认行为 --- 跳转
                event.preventDefault();
            }
        }
    });
</script>
</body>
</html>